<template>
  <div>
     <h1>我是父组件</h1>
     <h1 id="box" ref="mybox">我是盒子</h1>
     <hr>
     <!-- ref 给子组件挂载上名字 -->
     <son-one ref="son"></son-one>
  </div>
</template>
<script>
import sonOne from './child/sonOne.vue'
export default {
  name:"MyRef",
  components:{sonOne},
  mounted(){
    // vue获取如何dom元素
     //    1.可以使用原生获取 querySelector getElementsByClassName getElementsById
    //  2,使用ref获取dom this.$refs.起的ref名
    // let box= document.getElementById('box');
    let box=this.$refs.mybox;// 获取到的是dom元素
    this.$refs.mybox.style.color="red";

    // ref可以获取子组件和dom元素都可以
    // ref获取子组件后 可以访问子组件的属性和方法
    // ref 可以完成父传子数据
    // this.$refs.子组件的ref名
    // this.$refs.son
    console.log(this.$refs.son.sonData) //使用子组件数据

    // 改变子组件数据
    this.$refs.son.sonData="我是父组件修改的数据"

    // 调用子组件方法
    this.$refs.son.say("韩语")

  }
}
</script>